import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { Navbar, FormControl, FormGroup, Glyphicon } from 'react-bootstrap'
import { Link } from 'react-router'
import '../assets/styles/header.css'
import { fetchNodesIfNeeded } from '../actions'

class Header extends Component {
  static propTypes = {
    pathname: PropTypes.string.isRequired,
    fetchNodesIfNeeded: PropTypes.func.isRequired,
  }
  constructor(props) {
    super(props);
    this.getCurrent = this.getCurrent.bind(this);
    this.state = {
      current: this.getCurrent(this.props.pathname),
      focus: false,
    };

    this.handleFocusBlur = this.handleFocusBlur.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  getCurrent(pathname){
    if (pathname.indexOf('topics') > -1) {
      return '/topics';
    }
    return pathname;
  }
  componentDidMount() {
    const { fetchNodesIfNeeded } = this.props
    fetchNodesIfNeeded();
  }

  componentWillReceiveProps(nextProps) {
    if (this.getCurrent(nextProps.pathname) !== this.state.current) {
      this.setState({
        current: this.getCurrent(nextProps.pathname),
      })
    }
  }

  handleFocusBlur(e) {
    this.state = {
      focus: e.target === document.activeElement,
    }
  }

  handleSubmit(e) {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }
  render() {
    return (
      <Navbar className="" id="navbar">
        <div className="navHeader">
            <Navbar.Header>
              <Navbar.Brand>
                <Link className="header-brand" to="/" > <img src="/images/logo.png" width="367" height="57" /></Link>
              </Navbar.Brand>
              <Navbar.Toggle />
            </Navbar.Header>
            <div className="navRight lr">
                <LoginIcon />
                <ShekongBg />
                <PasswordSelect />
                <QuitBtn />
                <div className="clear"></div>
            </div>
            <div className="clear"></div>
        </div>
        <div className="collapseDiv">
            <Navbar.Collapse>
              <ul id="nav" className="nav navbar-nav">
                <li className={ this.state.current === '/topics' ? "active" : 'activeInit'} ><Link to='/topics'>首页</Link></li>
                <li className={ this.state.current === '/dtgk' ? "active" : 'activeInit' } ><Link to='/dtgk'>动态管控</Link></li>
                <li className={ this.state.current === '/sites' ? "active" : 'activeInit' } ><Link to='/sites'>智能检索</Link></li>
                <li className={ this.state.current === '/homeland' ? "active" : 'activeInit' }><Link to='/homeland'>统计报表</Link></li>
                <li className={ this.state.current === '/ypfx' ? "active" : 'activeInit' } ><Link to='/ypfx' >研判分析</Link></li>
                <li className={ this.state.current === '/gzsj' ? "active" : 'activeInit' } ><Link to='/gzsj' >工作审计</Link></li>
                <li className={ this.state.current === '/grzx' ? "active" : 'activeInit' } ><Link to='/grzx' >个人中心</Link></li>
                <li className={ this.state.current === '/xtgl' ? "active" : 'activeInit' } ><Link to='/xtgl' >系统管理</Link></li>
              </ul>

            </Navbar.Collapse>
        </div>
        
      </Navbar>
    );
  }
}
// 登陆者图像和姓名
const LoginIcon = React.createClass({
  render(){
    return (
      <div className="loginIconWrap lf">
          <div className="loginIcon lf">
            <img src="/images/head.png" width="57" height="57"/>
          </div>
          <div className="loginName lf">
            <p>administrator</p>
          </div>
          <div className="clear"></div>
      </div>
    )
  }
});
//涉恐背景查询
const ShekongBg = React.createClass({
    render(){
        return (
            <div className="shekongDiv lf">
              <div className="shekongSleTil">
                <span>涉恐背景查询</span>
                <img src="/images/down.png" alt="海邻科反恐利剑图标" className="lr marT5"/>
              </div>
            </div>
        )
    }
});
//修改密码下拉框
const PasswordSelect = React.createClass({
  render(){
    return (
        <div className="pswSelDiv lf">
          <div className="pswSleTil">
            <span>修改密码</span>
            <img src="/images/down.png" alt="海邻科反恐利剑图标" className="lr marT5"/>
          </div>
        </div>
    )
  }
});
//退出系统按钮
const QuitBtn = React.createClass({
  render(){
    return (
      <div className="quitbtnWrap lr">
        <button>退出系统</button>
      </div>
    )
  }
});
  


const mapStateToProps = (state, props) => {
  let {pathname, hash} = state.routing.locationBeforeTransitions;
  if (hash.indexOf('#') > -1) {
    pathname = hash.slice(1).split('?')[0];
  }
  return {
    pathname,
  }
}

const mapDispatchToProps = (dispatch, props) => {
  return {
    fetchNodesIfNeeded: () => dispatch(fetchNodesIfNeeded())
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Header)
